import { connect } from "react-redux";
import { decrement, increment } from "../store/actionCreators";

function Hello(props) {
  console.log("Hello Props", props);
  return (
    <div>
      <h2>Hello</h2>
      <p>msg: {props.msg}</p>
      <p>count: {props.count}</p>
      <button onClick={props.fn1}>FN1</button>
      <button onClick={props.fn2}>FN2</button>
    </div>
  );
}

const mapStateToProps = (state, ownProps) => {
  console.log("mapStateToProps - state", state);
  console.log("mapStateToProps - ownProps", ownProps);
  return {
    msg: state.msg,
    count: state.count,
  };
};

// const mapDispatchToProps = (dispatch) => {
//   return {
//     fn1: () => dispatch({ type: "INCREMENT" }),
//     fn2: () => dispatch({ type: "DECREMENT" }),
//   };
// };

const mapDispatchToProps = {
  fn1: increment,
  fn2: decrement,
  fn3: () => ({ type: "INCREMENT" }),
};

export default connect(mapStateToProps, mapDispatchToProps)(Hello);
